<template>
	<view class="store-page">
		<nav-bar title="门店" :leftSlot="true">
			<template slot="leftSlot" @click="toMap">
				<view class="area-select">
					<text>{{ nowArea }}</text>
					<image class="arrow-icon" :src="baseIconUrl + 'icon_bottom_arrow.png'" mode="aspectFill" />
				</view>
			</template>
		</nav-bar>
		<you-tabs :activeName="tabActive" :tabsList="tabsList" @tabClick="clickTabItem" :showMoreTab="true"></you-tabs>
		<you-scroll :loadingHeight="loadingHeight" :mainHeight="scrollHeight" :isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" @onRefresh="onRefresh" @loadMore="loadMore">
			<template>
				<view v-if="isLoading" class="common-loading">
					<image class="loading-img" :src="baseIconUrl + 'commonIcon/icon_loading.png'" />
					正在加载数据，请稍后......
				</view>
				<view class="common-no-data" v-else-if="!storeList || storeList.length === 0">
					<image class="no-data-img" :src="baseIconUrl + 'commonIcon/icon_no_data.png'" />
					<view class="text">暂无门店~</view>
				</view>
				<view v-else class="store-list">
					<store-list :storeList="storeList"></store-list>
				</view>
			</template>
		</you-scroll>
	</view>
</template>

<script>
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	import StoreList from '../subPages/components/storeList'
	export default {
		name: 'Store',
		components: {
			StoreList
		},
		data() {
			return {
				baseIconUrl,
				baseImgUrl,
				nowArea: '武汉市',
				tabActive: '',
				tabsList: [],
				loadingHeight: '',
				scrollHeight: '',
				isAllData: false,
				isRequestSuccess: false,
				isLoading: false,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				currentType: "",
				storeList: [],
				cityObject: {},
				cityObjects: {},
				item: {},
			}
		},

		async onLoad() {
			this.scrollHeight = this.$store.getters.heightData.mainHeight - 48 + 'px'
			this.loadingHeight = this.$store.getters.heightData.mainHeight - 68 + 'px'
			await this.getTags()
			await this.getLocation()
		},
		async onShow() {
			await this.getTags()
			const cityObjects = this.$store.getters.city
			if (cityObjects && cityObjects.cityString) {
				await this.myAmapFun.getRegeo({
					location: `${cityObjects.longitude},${cityObjects.latitude}`,
					success: succ => {
						const datas = {
							// city: succ[0].regeocodeData.addressComponent.adcode,
							cityString: '',
							longitude: cityObjects.longitude,
							latitude: cityObjects.latitude,
							storeTags: this.tabActive || "",
							isInitiate: 0,
							status: 1
						}
						// this.$store.commit('SET_CITYOBJECT', datas)
						console.log(this.$store.getters.city);
						this.cityObject = this.$store.getters.city
						this.nowArea = this.$store.getters.city.cityString
						this.getStoreList(datas)

					},
					fail: err => {
						console.log(err)
					}
				})
			}
			const result = uni.getStorageSync('item')
			if (result) {
				this.clickTabItem(JSON.parse(result).id)
				this.tabActive = JSON.parse(result).id
				// 用完后清除数据
				// uni.removeStorage({
				//   key: 'item'
				// })
			}
		},
		methods: {
			async toMap() {
				await uni.chooseLocation({
					success: res => {
						this.myAmapFun.getRegeo({
							location: `${res.longitude},${res.latitude}`,
							success: succ => {
								const datas = {
									// city: succ[0].regeocodeData.addressComponent.adcode,
									cityString: succ[0].desc,
									longitude: res.longitude,
									latitude: res.latitude
								}
								this.$store.commit('SET_CITYOBJECT', datas)
								this.cityObject = this.$store.getters.city
								console.log(this.$store.getters.city);
								this.nowArea = succ[0].desc
								this.onRefresh()
							},
							fail: err => {
								console.log(err)
							}
						})
					}
				})
			},
			clickTabItem(value) {
				console.log(888, value)
				this.tabActive = value
				this.cityObject.storeTags = value
				this.pageNum = 1
				this.storeList = []
				const data = {
					...this.cityObject,
					status: 1,
					isInitiate: 0,
					cityString: ''
				}
				this.getStoreList(data)
			},
			async changeCity() {
				uni.navigateTo({
					url: '/subPages/index/chooseArea'
				})
			},
			async getTags() {
				const data = {
					type: 2,
					pageSize: 100,
				}
				const res = await this.$GET('/fx/tag/list', data)
				console.log(res)
				if (res.code == 200) {
					const newArr = res.rows.map((item) => {
						item.label = item.tagName
						item.name = item.id
						return item
					})
					newArr.unshift({
						label: '全部',
						name: ''
					})
					this.tabActive = newArr[0].name
					this.tabsList = newArr
				}
			},
			async getLocation() {
				await uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res)
						this.myAmapFun.getRegeo({
							location: `${res.longitude},${res.latitude}`,
							success: succ => {
								console.log('高德地图返回--->', succ)
								const datas = {
									// city: succ[0].regeocodeData.addressComponent.adcode,
									cityString: '',
									longitude: res.longitude,
									latitude: res.latitude,
									storeTags: this.tabActive || "",
									isInitiate: 0,
									status: 1
								}
								this.cityObject = datas
								this.nowArea = succ[0].desc
								this.getStoreList(datas)
								this.$nextTick(() => {
									uni.navigateBack()
								})
							},
							fail: err => {
								console.log(err)
							}
						})
					},
					fail: error => {
						console.log(error)
					}
				})
			},
			async getStoreList(datas) {
				const data = {
					// city: datas.city,
					cityString: datas.cityString,
					longitude: datas.longitude,
					latitude: datas.latitude,
					storeTags: datas.storeTags || "",
					isInitiate: 0,
					status: 1
				}
				const res = await this.$GET('/fx/store/listApp', data)
				console.log('城市', res)
				if (res.code == 200) {
					let newArr = res.data.map((item) => {
						if (item.tegNames != null) {
							item.tegNames = item.tegNames.split(",")
						}
						console.log(item.tegNames);
						return item
					})
					this.storeList = newArr
				}
				this.total = this.storeList.length
				this.isRequestSuccess = true
				this.isLoading = false
			},
			// 下拉刷新
			onRefresh() {
				this.pageNum = 1
				this.storeList = []
				this.isAllData = false
				this.isRequestSuccess = false
				const data = {
					...this.cityObject,
					isInitiate: 0,
					status: 1,
					cityString: ''
				}
				this.getStoreList(data)
			},
			// 上拉加载
			loadMore() {
				const data = {
					...this.cityObject,
					isInitiate: 0,
					status: 1,
					cityString: ''
				}
				if (this.storeList.length < this.total) {
					this.pageNum++
					this.isAllData = false
					this.isRequestSuccess = false
					this.getStoreList(data)
				} else {
					this.isAllData = true
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.store-page {
		background-color: #FFF;
	}

	.area-select {
		display: flex;
		align-items: center;
		padding-left: 28rpx;
		font-size: 28rpx;
		color: #FFF;

		text {
			max-width: 200upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.arrow-icon {
			width: 20rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}
	}

	.store-list {
		padding: 0 28rpx;
		background-color: #FFF;
	}
</style>